<template>
    <view>
        <u-list>
            <u-list-item>
                <u-cell title="头像" isLink @click="editAvatar">
                    <u-avatar slot="value" :src="joinDomain(user.avatar)"></u-avatar>
                </u-cell>
            </u-list-item>
            <u-list-item>
                <u-cell title="昵称" :value="user.nickname" isLink @click="edit('昵称', 'nickname', user.nickname)"></u-cell>
            </u-list-item>
            <u-list-item>
                <u-cell title="用户名" :value="user.username" isLink @click="edit('用户名', 'username', user.username)"></u-cell>
            </u-list-item>
        </u-list>
        <u-action-sheet title="编辑" :show="show" closeOnClickOverlay @close="show = false">
            <view class="form" >
                <u--form labelPosition="left" :model="formData" ref="form">
                    <u-form-item :label="title" borderBottom ref="item1">
                        <u--input v-model="formData[key]" placeholder="请输入" clearable></u--input>
                    </u-form-item>
                </u--form>
            </view>
            <u-button type="primary" text="提交" @click="submit"></u-button>
        </u-action-sheet>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                show: false,
                title: '',
                list: [],
                formData: {
                    nickname: '',
                    username: ''
                },
                key: ''
            }
        },
        computed: {
            user() {
                return this.$store.state.user
            }
        },
        methods: {
            editAvatar() {
                uni.chooseImage({
                    success: (e) => {
                        console.log(e)
                        this.$http.uploadFile(e.tempFilePaths[0]).then(res => {
                            console.log(res.data.url)
                            return this.updateUser({
                                avatar: res.data.url
                            })
                        }).then(res => {
                            this.$store.dispatch('login', {
                                ...this.user,
                                ...res.data
                            })
                            console.log(res)
                        })
                    }
                })
            },
            edit(title, key, value) {
                this.show = true
                this.title = title
                this.formData[key] = value
                this.key = key
            },
            updateUser(data) {
                return this.$http.put('/avatar', data)
            },
            submit() {
                this.updateUser({
                    [this.key]: this.formData[this.key]
                }).then(res => {
                    this.$store.dispatch('login', {
                        ...this.user,
                        ...res.data
                    })
                    this.show = false
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .form{
        padding: 100rpx 20rpx;
        padding-top: 20rpx;
    }
</style>
